<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记列表</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="col-xs-6 col-xs-offset-3">
            <h2 class="page-header">笔记列表</h2>
            <div class="list-group">
                <% for(let i=0;i<data.length;i++){ %>
                <li noteid="<%= data[i]._id %>" href="#" class="list-group-item">
                    <a href=""><%= data[i].title %></a>
                    <a noteid="<%= data[i]._id %>" href="javascript:void(0)" class="del glyphicon glyphicon-remove pull-right" aria-hidden="true"></a>
                    <a href="/note/<%=data[i]._id%>/edit" class="glyphicon glyphicon-edit pull-right" style="margin-right: 5px;" aria-hidden="true"></a>
                </li>
                <% } %>
            </div>
        </div>
    </div>
    <script>
        //获取所有的删除的 a 标签
        const deleteLinks = document.querySelectorAll('.del');
        const ul = document.querySelector('.list-group');
        const lis = document.querySelectorAll('li');
        //绑定事件
        for(let i=0;i<deleteLinks.length;i++){
            deleteLinks[i].onclick = function(){
                //获取 li 元素
                const li = this.parentElement;
                //获取当前 a 标签身上的 noteid 属性
                let id = this.getAttribute('noteid');
                //发送 AJAX 请求    /note/ekajklfejaofew/delete
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                //初始化
                xhr.open('GET',`/note/${id}/delete`);
                //发送
                xhr.send();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status>= 200 && xhr.status < 300){
                            //判断
                            if(xhr.response.code === 0){
                                //删除成功 删除当前li标签
                                ul.removeChild(li);
                                // alert('删除成功');
                            }else{
                                //删除失败
                                alert('删除失败');
                            }
                        }else{
                            alert('删除失败!!');
                        }
                    }
                }

            }
        }
        
        //绑定事件
        for(let i=0;i<lis.length;i++){
            //双击事件
            lis[i].ondblclick = function(){
                // 保存当前 li 元素
                let that = this;
                //创建 input 表单框
                let input = document.createElement('input');
                //获取当前点击的 li 标签中的第一个 a 元素
                let a = this.getElementsByTagName('a')[0];
                //修改 input 元素的值
                input.value = a.innerHTML;
                //替换节点
                this.replaceChild(input, a);
                //input 元素选中文本
                input.select();
                // input 标签绑定丧失焦点事件
                input.onblur = function(){
                    //发送 AJAX 请求  更新数据 _id  {title:'新标题'}
                    let id = this.parentElement.getAttribute('noteid');
                    //获取标题的新数据
                    let title = this.value;
                    //发送AJAX请求
                    const xhr = new XMLHttpRequest();
                    xhr.responseType = 'json';
                    xhr.open('post', `/note/${id}/update`);
                    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                    xhr.send(`title=${title}`);
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState === 4){
                            if(xhr.status>=200 && xhr.status<300){
                                //判断
                                if(xhr.response.code === 0){
                                    //如果更新成功 将 input 标签替换为 a
                                    let a = document.createElement('a');
                                    a.innerHTML = title;
                                    //执行替换
                                    that.replaceChild(a, input);
                                }else{
                                    alert('更新失败');
                                }
                            }else{
                                alert('更新失败');
                            }
                        }
                    }
                }
            }
        }

    
    </script>
</body>
</html>